<template>
	<div class="content-manage">
		<div class="category">
			<div class="loading" v-if="loading"><span class="el-icon-loading"></span>拼命加载中</div>
			<el-tree
			:data="categoryList"
			node-key="catid"
			:props="defaultProps"
			highlight-current
			default-expand-all
			:expand-on-click-node="false"
			ref="categorytree"
			@node-click="handleNodeClick"
			v-if="!loading">
				<span class="custom-tree-node" slot-scope="{ node, data }">
					<span>{{ node.label.name }}</span>
					<span v-if="node.label.flag == 2">
						<tag color="error" class="tag_small">{{ node.label.content_count }}</tag>
					</span>
				</span>
			</el-tree>
		</div>
		<div class="content">
			<router-view :key="reloadRouter"></router-view>
		</div>
	</div>
</template>

<script>

export default {
	inject: ['reload'],
	data() {
		return {
			loading: true,
			categoryList: [
				// {
				// 	id: 1,
				// 	label: {
				// 		name: '一级 1',
				// 		content_count: 0
				// 	},
				// }, 
				// {
				// 	id: 2,
				// 	label: {
				// 		name: '一级 2',
				// 		content_count: 100
				// 	},
				// 	children: [
				// 		{
				// 			id: 3,
				// 			label: {
				// 				name: '二级 2-1',
				// 				content_count: 0
				// 			}
				// 		},
				// 		{
				// 			id: 4,
				// 			label: {
				// 				name: '二级 2-2',
				// 				content_count: 0
				// 			}
				// 		}
				// 	]
				// }, 
				// {
				// 	id: 5,
				// 	label: {
				// 		name: '一级 3',
				// 		content_count: 0
				// 	},
				// 	children: [
				// 		{
				// 			id: 6,
				// 			label: {
				// 				name: '二级 3-1',
				// 				content_count: 0
				// 			}
				// 		},
				// 		{
				// 			id: 7,
				// 			label: {
				// 				name: '二级 3-2',
				// 				content_count: 0
				// 			}
				// 		}
				// 	]
				// },
			],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			/*主要是为了刷新子路由*/
			reloadRouter: new Date().getTime(),
			allContentCount: 0,//所有内容数量
		};
	},
	created: function() {
		
		/*获取分类数据*/
		this.getCategoryList()
		/*设置默认高亮*/
		// this.currCategory()
	},
	watch: {
		/*监听路由 分类ID 变化*/
		'$route' (to, from){
			// // console.log(to.query.catid, 'bbb')
			// let query = {
			// 	catid: to.query.catid,
			// }
			// console.log(query)
			// this.$router.replace({name: to.name, query: query});
			this.reloadRouter = new Date().getTime()
		}
	},
	methods: {
		/*获取栏目*/
		getCategoryList: function(parentid = 0){
			if(this.$api.goodsCategoryList != undefined){
				this.$get(this.$api.goodsCategoryList, {
					// 'parentid': parentid,
					'type': 'ele',
					// 'display': 0,
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							/*所有内容*/
							this.countAllContentCount(res.data.data)
							let all = {
									'alias': '',
									'catid': 0,
									'children': [],
									'content_count': this.allContentCount,
									'display': true,
									'flag': 2,
									'label': {
										'name': '所有内容',
										'flag': 2,
										'content_count': this.allContentCount,
									},
									'outside': 1,
									'parentid': 0,
									'preview_count': 0,
								}
							this.categoryList = res.data.data
							this.categoryList.unshift(all)
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false
				})
			}else{
				this.$message({
					showClose: true,
					message: '没有分类列表的权限',
					type: 'error'
				});
			}
		},
		/*递归一个分类，计算总内容数量*/
		countAllContentCount: function(data){
			Object.keys(data).forEach((k) => {
				this.allContentCount += parseInt(data[k]['content_count'])
				// console.log(data[k]['content_count'], data[k]['catid'])
				if(data[k]['children'].length){
					this.countAllContentCount(data[k]['children'])
				}
			})
		},
		/*点击节点 跳转路由*/
		handleNodeClick: function(node){
			// console.log(node.catid)
			let query = {}
			if(node.catid == 0){//获取所有数据
				query = {
					'catid': node.catid,
					'haschild': 1,
				}
			}else{
				query = {
					'catid': node.catid
				}
			}
			if(this.$api.goodsList != undefined){
				this.$router.push({
					name: 'pc/epi/pj8/GoodsList',
					query: query
				})
			}else{
				this.$message({
					showClose: true,
					message: '没有内容列表的权限',
					type: 'error'
				});
			}
		},
		/*高亮当前菜单*/
		currCategory: function(){
			/*设置默认高亮*/
			setTimeout(()=>{
				this.$refs.categorytree.setCurrentKey(this.$route.query.catid)
			}, 5000)
			/*注释原因：下面的代码获取不到this.$refs.categorytree，不知道为什么，navbar组件是可以的*/
			// this.$nextTick(() => {
			// 	this.$refs.categorytree.setCurrentKey(this.$route.query.catid)
			// })
		}
	},
	computed: {
		
	}
};
</script>

<style lang="stylus" scoped>
@import '~static/css/variable.styl'
.content-manage
	height: 100%
	display: flex
	.loading
		width: 100%
		height: 100%
		padding-top: 30px
		text-align: center
		.el-icon-loading
			margin-right: 5px
	.title
		width: 100%
		height: 70px
		overflow: hidden
		font-weight: bold
		line-height: 70px
		padding: 0 20px
		box-sizing: border-box
		background-color: #d5dae1
		.iconfont
			font-size: 20px
			margin: 0 auto
			display: block
			width: 20px
			height: 20px
		.iconfont:hover
			color: $color-default
			cursor: pointer
	.category
		width: 200px
		height: 100%
		border: #e8ebef 2px solid
		overflow: auto
		.el-tree
			// background: #e8ebef
			font-size: 12px !important
			/deep/ .el-tree-node__content
				height: 30px
			/deep/ .el-icon-caret-right:before
				color: #2e2e2e
			/deep/ .is-leaf:before
				color: transparent !important
			/deep/ .el-tree-node.is-current>.el-tree-node__content
				background-color: #e8ebef !important
			/deep/ .custom-tree-node>span
				margin-right: 10px
			.tag_small
				line-height: 14px !important
			/deep/ .ivu-tag-error
				background: $color-default
	.content
		flex: 1
		overflow: auto
		// border: #e8ebef solid 2px
		border-left: 0
		height: 100%
		padding: 0 10px
</style>